import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import './index.css'

function AppointmentNoticePage() {
  const navigate = useNavigate()
  const [agreed, setAgreed] = useState(false)

  // 处理同意预约须知
  const handleAgree = () => {
    if (agreed) {
      // 跳转到院区列表页面
      navigate('/campus-list')
    }
  }

  return (
    <div style={{ minHeight: '100vh', background: '#f5f5f5' }}>
      {/* 顶部导航 */}
      <div style={{ 
        background: '#fff', 
        padding: '12px 16px', 
        borderBottom: '1px solid #eee',
        position: 'sticky',
        top: 0,
        zIndex: 100
      }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <button 
            onClick={() => navigate(-1)}
            style={{ 
              border: 'none', 
              background: 'none', 
              fontSize: 18, 
              marginRight: 12,
              cursor: 'pointer'
            }}
          >
            ←
          </button>
          <h1 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>
            预约须知
          </h1>
        </div>
      </div>

      {/* 主要内容 */}
      <div style={{ padding: '16px' }}>
        {/* 预约须知卡片 */}
        <div style={{ 
          background: '#fff', 
          borderRadius: 12, 
          padding: 20,
          marginBottom: 16,
          boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
        }}>
          <h2 style={{ 
            margin: '0 0 16px 0', 
            fontSize: 18, 
            fontWeight: 600,
            color: '#333',
            textAlign: 'center'
          }}>
            门诊预约挂号须知
          </h2>

          <div style={{ fontSize: 14, lineHeight: 1.6, color: '#666' }}>
            <div style={{ marginBottom: 16 }}>
              <h3 style={{ fontSize: 16, fontWeight: 600, color: '#333', margin: '0 0 8px 0' }}>
                一、预约时间
              </h3>
              <ul style={{ margin: 0, paddingLeft: 20 }}>
                <li>可提前7天预约挂号</li>
                <li>预约时间：每日8:00-22:00</li>
                <li>取消预约：就诊前24小时可取消</li>
              </ul>
            </div>

            <div style={{ marginBottom: 16 }}>
              <h3 style={{ fontSize: 16, fontWeight: 600, color: '#333', margin: '0 0 8px 0' }}>
                二、就诊须知
              </h3>
              <ul style={{ margin: 0, paddingLeft: 20 }}>
                <li>请携带有效身份证件</li>
                <li>提前15分钟到达医院</li>
                <li>按预约时间顺序就诊</li>
                <li>迟到超过30分钟视为爽约</li>
              </ul>
            </div>

            <div style={{ marginBottom: 16 }}>
              <h3 style={{ fontSize: 16, fontWeight: 600, color: '#333', margin: '0 0 8px 0' }}>
                三、费用说明
              </h3>
              <ul style={{ margin: 0, paddingLeft: 20 }}>
                <li>普通门诊：挂号费10元</li>
                <li>专家门诊：挂号费50-100元</li>
                <li>特需门诊：挂号费200-500元</li>
                <li>支持微信、支付宝、银行卡支付</li>
              </ul>
            </div>

            <div style={{ marginBottom: 16 }}>
              <h3 style={{ fontSize: 16, fontWeight: 600, color: '#333', margin: '0 0 8px 0' }}>
                四、注意事项
              </h3>
              <ul style={{ margin: 0, paddingLeft: 20 }}>
                <li>请如实填写个人信息</li>
                <li>如有发热、咳嗽等症状请及时告知</li>
                <li>孕妇、儿童等特殊人群请选择相应科室</li>
                <li>急诊患者请直接前往急诊科</li>
              </ul>
            </div>

            <div style={{ marginBottom: 16 }}>
              <h3 style={{ fontSize: 16, fontWeight: 600, color: '#333', margin: '0 0 8px 0' }}>
                五、爽约处理
              </h3>
              <ul style={{ margin: 0, paddingLeft: 20 }}>
                <li>爽约3次将被限制预约30天</li>
                <li>爽约记录将影响信用评级</li>
                <li>请珍惜医疗资源，按时就诊</li>
              </ul>
            </div>

            <div style={{ 
              background: '#fff7e6', 
              border: '1px solid #ffd591', 
              borderRadius: 8, 
              padding: 12,
              marginTop: 20
            }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: '#d46b08', marginBottom: 8 }}>
                ⚠️ 重要提醒
              </div>
              <div style={{ fontSize: 13, color: '#d46b08', lineHeight: 1.5 }}>
                疫情期间，请配合医院防疫要求，佩戴口罩，保持社交距离。如有发热、干咳等症状，请及时就医并告知医生。
              </div>
            </div>
          </div>
        </div>

        {/* 同意条款 */}
        <div style={{ 
          background: '#fff', 
          borderRadius: 12, 
          padding: 16,
          marginBottom: 20,
          boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
        }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
            <input
              type="checkbox"
              id="agree"
              checked={agreed}
              onChange={(e) => setAgreed(e.target.checked)}
              style={{ marginTop: 2 }}
            />
            <label 
              htmlFor="agree"
              style={{ 
                fontSize: 14, 
                color: '#666', 
                lineHeight: 1.5,
                cursor: 'pointer'
              }}
            >
              我已仔细阅读并同意上述预约须知，承诺遵守医院规定，按时就诊，不无故爽约。
            </label>
          </div>
        </div>

        {/* 操作按钮 */}
        <div style={{ display: 'flex', gap: 12 }}>
          <button
            onClick={() => navigate(-1)}
            style={{
              flex: 1,
              padding: '12px 24px',
              background: '#f5f5f5',
              color: '#666',
              border: 'none',
              borderRadius: 8,
              fontSize: 16,
              cursor: 'pointer',
              transition: 'background-color 0.2s'
            }}
          >
            返回
          </button>
          <button
            onClick={handleAgree}
            disabled={!agreed}
            style={{
              flex: 1,
              padding: '12px 24px',
              background: agreed ? '#1677ff' : '#ccc',
              color: '#fff',
              border: 'none',
              borderRadius: 8,
              fontSize: 16,
              cursor: agreed ? 'pointer' : 'not-allowed',
              transition: 'background-color 0.2s'
            }}
          >
            同意并继续
          </button>
        </div>
      </div>
    </div>
  )
}

export default AppointmentNoticePage

